<!--  -->
<template>
    <van-popup v-model="showpopul" round position="bottom">
      <div class="tucengpupol">图层<van-icon name="cross" @click="close" /></div>
      <div class="mapcolor">
        <div
          v-for="(item, index) in tucenglist"
          :key="index"
          @click="clicktuceng(item, index)"
          :class="activetuceng == index ? 'activetuceng' : ''"
        >
          <img :src="item.image" alt="" />
          {{ item.name }}
        </div>
      </div>
    </van-popup>
  </template>
  
  <script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        activetuceng: -1,
        showpopul: true,
        tucenglist: [
          {
            name: '普通',
            image: require('../../assets/liveData/putong.png'),
          },
          {
            name: '浅色',
            image: require('../../assets/liveData/qs.png'),
          },
          {
            name: '暗色',
            image: require('../../assets/liveData/anse.png'),
          },
          {
            name: '卫星图',
            image: require('../../assets/liveData/weixing.png'),
          },
        ],
      }
    },
  
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      showpopul: {
        handler(newVal, oldVal) {
          if (newVal == false) {
            this.$emit('close', false)
          }
        },
        immediate: true,
        deep: true, //
      },
    },
    //方法集合
  
    methods: {
      close() {
        this.$emit('close', false)
        this.showpopul = false
      },
      clicktuceng(item, index) {
        var style = ''
        if (item.name == '普通') {
          style = 'aegis://styles/aegis/Streets-v2'
        } else if (item.name == '浅色') {
          style = 'aegis://styles/aegis/StreetsLight'
        } else if (item.name == '暗色') {
          style = 'aegis://styles/aegis/StreetsDark'
        } else if (item.name == '卫星图') {
          style = 'aegis://styles/aegis/Satellite512'
        }
        this.$emit('huanhu', style)
        //   this.initMap(
        //     [this.longAndLati.lapsXcoordinate, this.longAndLati.lapsYcoordinate],
        //     style
        //   )
        this.activetuceng = index
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.showpopul = true
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
  </script>
  <style type="text/css" lang="less" scoped>
  .tucengpupol {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #101010;
    line-height: 25px;
  }
  /deep/ .van-popup {
    padding: 10px;
    background: #f6f7f9;
    border-radius: 20px 20px 0px 0px;
  }
  /deep/.mapcolor {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 360px;
    height: 93px;
    margin-top: 10px;
    background: #ffffff;
    border-radius: 10px;
    margin: auto;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101010;
      img {
        width: 50px;
        height: 50px;
        margin-bottom: 6px;
      }
    }
    .activetuceng {
      color: #357cff;
    }
  }
  /*@import url(); 引入公共css类*/
  </style>
  